import { CloseOutline, LeftOutline, MoreOutline } from 'antd-mobile-icons'
import type { NavigateBarProps } from '../../type/NavigateBar'
import './NavigateBarStyle.sass'
import { useNavigate } from 'react-router-dom'


function NavigateBar(props: NavigateBarProps) {
  const navigate = useNavigate()
  return (
    <div className='navigatebar'>
      {props.hasBack && (
        <div
          className="back"
          onClick={props.backClick}
        >
          <LeftOutline className='back_btn' />
        </div>
      )}

      <div className="navigatebar_title" style={{ textAlign: props.hasBack ? 'center' : 'left' }}>{props.title}</div>
      <div className="navigatebar_right_btn">
        <MoreOutline />
        <CloseOutline />
      </div>
    </div>
  )
}

export default NavigateBar
